<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=0.5,minimum-scale=0.5,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>选择年龄</title>
    <link rel="stylesheet" type="text/css" href="__CSS__api.css"/>
    <link rel="stylesheet" type="text/css" href="__CSS__aui.css"/>
    <link rel="stylesheet" type="text/css" href="__CSS__common.css" />
    <style>
        html, body {
            width: 100%;
            height: 100%;
        }

        body {
            background: rgba(0, 0, 0, 0.2);
        }

        .title {
            height: 88px;
            color: #EB9F18;
            line-height: 88px;
            text-align: center;
            background-color: #FFFFFF;
            border-top-right-radius: 10px;
            border-top-left-radius: 10px;
            border-bottom: 1px solid #EFEFEF;
        }

        .confirm {
            position: absolute;
            top: 0;
            right: 0;
            height: 88px;
            line-height: 88px;
            color: #F4A435;
            font-size: 32px;
            padding-right: 30px;
        }

        .close {
            position: absolute;
            top: 0;
            left: 0;
            height: 88px;
            line-height: 88px;
            color: #999999;
            font-size: 28px;
            padding-left: 30px;
        }

        .list-area {
            display: flex;
            align-items: center;
            position: relative;
            height: 289px;
            background-color: #FFFFFF;
        }

        .list-01 {
            flex: 1;
            overflow-y: scroll;
            height: 289px;
        }

        .scroll-area {
            min-height: 289px;
        }

        .hr-1 {
            width: 100%;
            height: 1px;
            position: absolute;
            top: 101px;
            left: 0;
            background: #E8E8E8;
        }

        .hr-2 {
            width: 100%;
            height: 1px;
            position: absolute;
            bottom: 101px;
            left: 0;
            background: #E8E8E8;
        }

        .list-item {
            height: 101px;
            text-align: center;
            line-height: 101px;
            color: #999999;
            font-size: 30px;
        }

        .list-item-active {
            height: 81px;
            text-align: center;
            line-height: 81px;
            color: #333333;
            font-size: 32px;
            font-weight: 700;
        }
    </style>
</head>
<body tapmode onclick="mask()">
<div style="position: fixed;bottom: 0;left: 0;width: 100%" class="underLine">
    <div class="title">
        <div class="close" tapmode onclick="cancel()">取消</div>
        <a href="javascript:void(0)">  <div class="confirm" tapmode onclick="confirm()">确定</div> </a>

    </div>
    <div class="list-area">
        <!--<div class="list-01" id="parent" onscroll="CalculateDistance(this)">-->
        <!--<div class="scroll-area" id="render-item-1"></div>-->
    <!--</div>-->
        <div class="list-01" id="child" onscroll="CalculateDistance2(this)">
            <div class="scroll-area" id="render-item-2">

            </div>
        </div>
        <!--<div class="list-01" id="children" onscroll="CalculateDistance3(this)">-->
            <!--<div class="scroll-area" id="render-item-3">-->

            <!--</div>-->
        <!--</div>-->
        <div class="hr-1"></div>
        <div class="hr-2"></div>
    </div>
</div>
<div class="toast-wrap">
    <span class="toast-msg"></span>
</div>
</body>
<script type="text/javascript" src="__JS__api.js"></script>
<script type="text/javascript" src="__JS__tt.js"></script>
<script type="text/javascript" src="__JS__jquery.min.js"></script>
<script type="text/javascript" src="__JS__common.js"></script>
<script type="text/javascript">
    var isScroll = false;
    var timer;
    var data2 = [];
    window.onload = function () {
        console.log(window.location.search);
        var num=window.location.search.split('=')[1];
        var  numtotal=parseInt(num)*101;

        document.getElementById('render-item-2').innerHTML=renderShi();
        document.getElementById('child').scrollTop =numtotal;
        document.getElementById('child').addEventListener('touchmove', CalculateDistance2(document.getElementById('child')));
    };

    //渲染市
    function renderShi () {
        var html = '<div class="list-item"></div>';

            for (var i = 0; i < 120; i++) {
                if (i == 1) {
                    html+='<div class="list-item list-item-active">'+i+'</div>';

                }else{
                    html+='<div class="list-item">'+i+'</div>';

                }

            }
        html += '<div class="list-item"></div>';
        return html;
    }




    function CalculateDistance2 (el) {
        var scrollDistance = +el.scrollTop;
        var parentItem=document.getElementsByClassName('list-item');
        // var parentItem = $api.domAll(el, '.list-item');
        document.getElementsByClassName('list-item-active')[0].className='list-item';
        parentItem[parseInt(scrollDistance / 101) + 1].className='list-item list-item-active';
        for (var i = 0; i < parentItem.length; i++) {
            if (parentItem[i].className == 'list-item list-item-active') {
                if (data2.length != 0) {
                    if (data2.length == 1) {
                        // $api.html($api.byId('render-item-3'), renderQu(data2[0].subDistrict));
                    } else {
                        // $api.html($api.byId('render-item-3'), renderQu(data2[i-1].subDistrict));
                    }
                }
            }
        }
        setTimeout(function () {
            el.scrollTop = (parseInt(+el.scrollTop / 101)) * 101;
        }, 300);
    }


    //确认
    function confirm () {
        var agenumber_obj=document.getElementsByClassName('list-item-active')[0].innerHTML;
        save(agenumber_obj);
    }


    function save(agenumber_obj) {
        $.ajax({
            url:'{:url("My/editUser")}',
            data:'user_age='+agenumber_obj,//
            type:'POST',
            dataType:'JSON',
            success: function(data){
                console.log(data.status);return false;
                if (data.status==200) {
                    toast('保存成功');
                    setTimeout(function () {
                        window.history.go(-1);
                    },500)

                }else {
                    toast(data.msg);
                }

            },
            error: function(xhr, type){
                toast('无网络或连接超时，请重试！');
                // 即使加载出错，也得重置

            }
        });
    }
    //取消
    function cancel () {
        window.history.go(-1);
    }

    //遮罩层关闭
    function mask () {
        if (event.target.nodeName.toLowerCase() == 'body') {
            cancel();
        }
    }

</script>
</html>
